<template>
  <div class="detail-container">
    <div>
      <el-card class="detail-card">
        <div class="card-header">
          <span>卡片名称</span>
          <!-- <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button> -->
        </div>
        <div style="margin-top: 20px;">
          <span>基本信息</span>
        </div>
        <div>
          <el-table
            :data="orderData"
            :header-cell-class-name="'headerBg'"
            border
            style="width: 100%">
            <el-table-column
              prop="orderSn"
              align="center"
              label="订单编号"
              width="250">
            </el-table-column>
            <el-table-column
              prop="memberUsername"
              label="用户账号"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              align="center"
              label="支付方式">
              <template slot-scope="scope">
                {{ payTypeOptions[scope.row.payType] }}
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px;">
          <span>收货人信息</span>
        </div>
        <div>
          <el-table
            :data="orderData"
            :header-cell-class-name="'headerBg'"
            border
            style="width: 100%">
            <el-table-column
              prop="receiverName"
              align="center"
              label="收货人"
              width="180">
            </el-table-column>
            <el-table-column
              prop="receiverPhone"
              align="center"
              label="手机号码"
              width="180">
            </el-table-column>
            <el-table-column
              prop="receiverProvince"
              align="center"
              label="收货地址">
              <template slot-scope="scope"> 
                {{ scope.row.receiverProvince + ' ' + scope.row.receiverCity + ' ' + scope.row.receiverCounty }}
              </template>
            </el-table-column>
            <el-table-column
              prop="receiverDetailAddress"
              label="详细地址">
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 20px;">
          <span>商品信息</span>
        </div>
        <div>
          <el-table
            :data="orderData[0].orderItemList"
            :header-cell-class-name="'headerBg'"
            border
            style="width: 100%">
            <el-table-column
              align="center"
              label="商品主图"
              width="180">
              <template slot-scope="scope">
                <el-image :src="scope.row.productPic">
                  <div slot="placeholder" class="image-slot">
                    加载中<span class="dot">...</span>
                  </div>
                </el-image>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productName"
              label="商品名称"
              width="180">
            </el-table-column>
            <el-table-column
              align="center"
              label="价格">
              <template slot-scope="scope"> 
                &yen;{{ scope.row.productPrice }}
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productQuantity"
              label="数量">
            </el-table-column>
            <el-table-column
              align="center"
              label="小计">
              <template slot-scope="scope"> 
                &yen;{{ scope.row.productPrice * scope.row.productQuantity }}
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getOrderByOrderSn } from '@/api/order'
export default {
  name: 'OrderDetail',
  data() {
    return {
      orderData: [],
      orderSn: this.$route.query.orderSn ? this.$route.query.orderSn : null,
      payTypeOptions: [
        "未支付", "微信支付", "支付宝支付"
      ]
    }
  },
  created() {
    this.onLoad()
  },
  methods: {
    onLoad() {
      if(this.orderSn != null){
        getOrderByOrderSn({orderSn: this.orderSn}).then(res => {
          console.log(this.orderData);
          this.orderData.push(res.data);
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  .detail-container {
    width: 80%;
    padding: 20px;
    margin: 20px auto;
    .detail-card {
      .card-header {
        background: #f2f6fc;
        height: 80px;
        margin: -20px -20px 0;
        line-height: 80px;
      }
    }
  }
  .headerBg {
    background: #eee!important;
  }
</style>